<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>高亮显示</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>

<body>
<div id="map"></div>
<div class="opt_panel">
    <button onclick="pauseHighLight()">暂停/恢复高亮</button>
    <button onclick="addHighLight()">添加高亮</button>
    <button onclick="stopHighLight()">移除高亮</button>
    <button onclick="setColor()">变更颜色</button>
    <button onclick="setSpeed()">变更速度</button>
</div>
<script>
    //示例说明：
    //本示例展示如何添加高亮设备
    //注：目前高亮存在性能问题，暂时不要超过200个设备(尚可接受的卡顿程度)
    mapOptions = {
        zoom: 14,
        center: [116, 31]
    }


    //地图，高亮工具
    var hlTool;

    /**
     * 添加设备并高亮
     */
    function addHighLight() {
        hlTool.setDatas(testDatas, true,false)
    }

    /**
     * 暂停/恢复高亮
     */
    function pauseHighLight() {
        if (hlTool.isFlicking()) {
            hlTool.pause()
        } else {
            hlTool.resume()
        }
    }

    /**
     * 移除高亮
     */
    function stopHighLight() {
        hlTool.stop()
    }

    /**
     * 设置高亮颜色
     */
    function setColor() {
        let color = 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')'
        hlTool.setColor(color)
    }

    //高亮闪烁速度
    let defaultSpeed = 2

    /**
     * 修改高亮闪烁速度
     */
    function setSpeed() {
        defaultSpeed = (defaultSpeed + 1) % 10
        hlTool.setSpeed(defaultSpeed)
    }


    //测试高亮数据
    let testDatas = []

    function initPage() {
        testDatas = [
            new egisV2.symbol.ElePointSymbol({

                devId: 'a10001',//oid，psrid
                devTypeId: '301000',//设备类型
                symbolId: "4020290",//符号ID
                symbolRotate: 20,//旋转角度
                symbolSize: 4,//大小
                symbolColor: '#ff0000',//颜色
                symbolOpacity: 0.1,//透明度
                symbolScalable: true,//缩放
                coordinates: [116, 31],//坐标
                attributes: {a: 1, b: 2}//其它信息
            }),
            // new egisV2.symbol.EleLineSymbol({
            //         devId: 'b20001',//oid，psrid
            //         devTypeId: '35421985',//设备类型
            //         symbolId: '420',//符号ID
            //         symbolWidth: 2,//线宽
            //         symbolColor: '#ff0000',//颜色
            //         symbolOpacity: 0.1,//透明度
            //         coordinates: [[116.0004, 31], [116.0005, 31.001]],
            //         attributes: {c: 3, d: 4}//其它属性
            //     }
            // ),
            new egisV2.symbol.EleLineSymbol({
                    devId: 'b20001',//oid，psrid
                    devTypeId: '3542198999',//设备类型
                    symbolId: '420',//符号ID
                    symbolWidth: 3,//线宽
                    symbolColor: '#ff0000',//颜色
                    symbolOpacity: 0.5,//透明度
                    coordinates: [[[116, 31], [116.0005, 31.001]], [[116.0001, 31.0001], [116.0007, 31.002]]],
                    attributes: {c: 3, d: 4}//其它属性
                }
            ),
            // new egisV2.symbol.EleLineSymbol({
            //         devId: "1587738dsdas",//oid，psrid
            //         devTypeId: '3217000',//设备类型
            //         symbolId: '420',//符号ID
            //         symbolWidth: 10,//线宽
            //         symbolColor: '#000000',//颜色
            //         symbolOpacity: 0.5,//透明度
            //         coordinates:   [[116.0004, 31], [116.0005, 31.001]],//[[118.16484679541908, 24.473814394297953], [118.16484797576189, 24.47381120428789]],
            //         attributes: {c: 3, d: 4}//其它属性
            //     }
            // ),
            // new egisV2.symbol.EleFillSymbol({
            //         type: 'fill',//类型point or line or fill
            //         devId: 'b20002',//oid，psrid
            //         devTypeId: '1988000',//设备类型
            //         symbolColor: '#ff0000',//颜色
            //         symbolFillColor: '#00ff00',//透明度
            //         symbolFillOpacity: 1,//透明度
            //         coordinates: [
            //             [[116, 31], [116.0005, 31.0005]],
            //             // [[116, 31], [116.0005, 31], [116.0005, 31.0005], [116, 31.0005], [116, 31]],
            //             // [[116.01, 31.01], [116.0105, 31.01], [116.0105, 31.0105], [116.01, 31.0105], [116.01, 31.01]],
            //             // [[116.015, 31.01], [116.0155, 31.01], [116.0155, 31.0105], [116.015, 31.0105], [116.015, 31.01]]
            //         ],//Polygon
            //         attributes: {c: 3, d: 4}//其它属性
            //     }
            // )

        ]

        hlTool = new egisV2.tool.HighLightTool(map, {color: '#ff00ff', speed: 2, maxOpacity: 1, minOpacity: 0.2})
        map.setZoom(20)
    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }

</script>
</body>
</html>
